<template>
  <div>
    <div class="top">
      <b class="num">航班动态</b>
      <div class="foucs">关注列表</div>

    </div>
    <!-- tip -->
    <div class="min">
       
      <div class="hb" :class="bool?'bg':''" @click="fun2(),com='Num'" ref="hb1">航班动态</div>
      <div class="jd"  :class="bool?'':'bg'" @click="fun3(),com='Floor'">按起降地</div>

    </div>
    <component :is="com"></component>
    <div class="find" @click="chaxun()">航班查询</div>

    <Nav/>
  </div>
  
</template>

<script scoped >
// 引入vant


// 引用动态
import Num from "./component3/num.vue"
import Floor from "./component3/floor.vue"
import Nav from "@/components/bottomnav.vue"
export default {
  components:{
    Nav,Num,Floor
  },
  data() {
    return {
      com:"Num",
      bool:true
    }
  },
  methods: {
   
   fun2(){
    this.bool=true
   },
   fun3(){
     this.bool=false
   },
   chaxun(){
     alert("数据获取失败！！！")
    //  this.$router.push("/jizhi")

   }
  

    
  },
  
}
</script>

<style scoped>
.top{
  width: 100%;
  height: 80px;
  background-color: #eaebef;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}
.num{
  line-height: 80px;
  width: 200px;


}
.foucs{
  line-height: 80px;
  width: 70px;
  margin-left: 50px;
  font-size: 0.12rem;
}
.min{
  width: 360px;
  height: 50px;
  margin: auto;
  display: flex;
  

  }
  .hb{
  flex: 1;
    height: 50px;
   
    text-align: center;
    line-height: 50px;
  }
  .bg{
     background-color: #909193;
    color: white;
  }

  .jd{
    flex: 1;
    height: 50px;
    text-align: center;
    line-height: 50px;
   
  }
  .find{
    width: 300px;
    height: 50px;
    margin: auto;
    background-color:#61af5b ;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    color: white;
  }



</style>